{% extends "personal_center/zichan_base.html" %}
{#库存入库单详情列表#}
{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        tr {
            height: 37px;
        }

        th {
            text-align: center;
        }

        tbody td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }

        #clsy_table tr td span:hover {
            color: red;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div class="headline">
        <div class="tab_top ">流水清单</div>
        {% if obj.purchase and obj.state == "draft" %}
            <div style="line-height: 30px; text-align: right;display: inline-block; position: relative;left: 85%">
                <button style="width: 100px; height: 30px; background: #1E90FF; border-radius: 4px;color: #FFFFFF;border: none; text-align: center"
                        type="button" onclick="submit_inner_data()">
                    入库
                </button>
            </div>
        {% elif obj.adopt and obj.state == "draft" %}
            <div style="line-height: 30px; text-align: right;display: inline-block; position: relative;left: 85%">
                <button style="width: 100px; height: 30px; background: #1E90FF; border-radius: 4px;color: #FFFFFF;border: none; text-align: center"
                        type="button" onclick="submit_inner_data()">
                    出库
                </button>
            </div>
        {% endif %}

    </div>

    <div style="padding: 15px 15% 0 15%; height: auto; min-height: 95%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
        <table id="clsy_table" style="border-collapse: collapse;border-color: #DCDCDC;" cellspacing="0" cellpadding="2"
               width="100%" border="1">
            <tr>
                <td colspan="7" style="color: #1E90FF; padding-left: 15px; background: #cccccc">账单信息</td>
            </tr>
            <tr>
                <td style="text-align: right; padding-right: 10px">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号
                </td>
                <td colspan="2" style="padding-left: 10px;">{{ obj.number }}</td>
                <td style="text-align: right; padding-right: 10px">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</td>
                <td colspan="3" style="padding-left: 10px;">
                    {% if obj.type == 'inner' %}
                        入库
                    {% elif obj.type == 'out' %}
                        出库
                    {% endif %}
                </td>
            </tr>
            {% if obj.purchase %}  {# 物料采购单，做入库处理 #}
                <tr>
                    <td style="text-align: right; padding-right: 10px">申&nbsp;&nbsp;请&nbsp;&nbsp;人</td>
                    <td colspan="2" style="padding-left: 10px;">{{ obj.purchase.apply_user.real_name }}</td>
                    <td style="text-align: right; padding-right: 10px">所属部门</td>
                    <td colspan="3" style="padding-left: 10px;">{{ obj.purchase.company.name }}</td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px">总&nbsp;&nbsp;金&nbsp;&nbsp;额</td>
                    <td colspan="2" style="padding-left: 10px;">{{ obj.purchase.total_amount }}</td>
                    <td style="text-align: right; padding-right: 10px">申请时间</td>
                    <td colspan="3" style="padding-left: 10px;">{{ obj.create_time | date:'Y-m-d H:i' }}</td>
                </tr>
                <tr>
                    <td colspan="7" style="color: #1E90FF; padding-left: 15px; background: #cccccc">采购明细</td>
                </tr>
                <tr>
                    <th style="width: 14%">序号</th>
                    <th style="width: 14%">物资名称</th>
                    <th style="width: 14%">单位</th>
                    <th style="width: 14%">数量</th>
                    <th style="width: 14%">单价</th>
                    <th style="width: 15%">金额</th>
                    <th style="width: 15%">实际采购数量</th>
                </tr>
                {% for line_obj in line_objs %}
                    <tr>
                        <td style="text-align: center">{{ forloop.counter }}</td>
                        <td style="text-align: center">{{ line_obj.product.name }}</td>
                        <td style="text-align: center">{{ line_obj.unit }}</td>
                        <td style="text-align: center">{{ line_obj.qty }}</td>
                        <td style="text-align: center">{{ line_obj.price }}</td>
                        <td style="text-align: center">{% widthratio line_obj.price 1 line_obj.qty %}</td>
                        {% if obj.state == 'draft' %}
                            <td><input placeholder="请输入..." class="real_qty" type="number" id="{{ line_obj.id }}"
                                       style="border: none;text-align: center; width: 100%;"></td>
                        {% elif obj.state == 'confirm' %}
                            <td style="text-align: center">{{ line_obj.real_qty }}</td>
                        {% endif %}

                    </tr>
                {% endfor %}
            {% elif obj.adopt %} {# 物资申领单，做出库处理 #}
                <tr>
                    <td style="text-align: right; padding-right: 10px">申&nbsp;&nbsp;请&nbsp;&nbsp;人</td>
                    <td colspan="2" style="padding-left: 10px;">{{ obj.adopt.apply_user.real_name }}</td>
                    <td style="text-align: right; padding-right: 10px">所属部门</td>
                    <td colspan="3" style="padding-left: 10px;">{{ obj.adopt.company.name }}</td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px">总&nbsp;&nbsp;数&nbsp;&nbsp;量</td>
                    <td colspan="2" style="padding-left: 10px;">{{ obj.adopt.total_qty }}</td>
                    <td style="text-align: right; padding-right: 10px">领用日期</td>
                    <td colspan="3" style="padding-left: 10px;">{{ obj.create_time | date:'Y-m-d H:i' }}</td>
                </tr>
                <tr>
                    <td colspan="7" style="color: #1E90FF; padding-left: 15px; background: #cccccc">领用详情</td>
                </tr>
                <tr>
                    <th style="width: 15%">序号</th>
                    <th colspan="2" style="width: 25%">物资名称</th>
                    <th style="width: 20%">单位</th>
                    <th style="width: 20%">领用数量</th>
                    <th style="width: 20%">实际领用数量</th>
                </tr>
                {% for line_obj in line_objs %}
                    <tr>
                        <td style="text-align: center">{{ forloop.counter }}</td>
                        <td colspan="2" style="text-align: center">{{ line_obj.product.name }}</td>
                        <td style="text-align: center">{{ line_obj.unit }}</td>
                        <td style="text-align: center">{{ line_obj.qty }}</td>
                        {% if obj.state == 'draft' %}
                            <td><input placeholder="请输入..." class="real_qty" type="number" id="{{ line_obj.id }}"
                                       style="border: none; text-align: center; width: 100%"></td>
                        {% elif obj.state == 'confirm' %}
                            <td style="text-align: center">{{ line_obj.real_qty }}</td>
                        {% endif %}
                    </tr>
                {% endfor %}
            {% endif %}
        </table>

    </div>
{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("zichan").className = "add_class";
            document.getElementById("product_dynamic").className = "add-nav-active";
        };

        function submit_inner_data() {
            var data_li = []
            var tag_li = document.getElementsByClassName('real_qty');
            for (var i = 0; i < tag_li.length; i++) {
                var data_dic = {}
                var id = tag_li[i].getAttribute('id')      // 采购单上采购物料id
                var real_qty = document.getElementById(id).value;   // 实际采购数量
                data_dic['id'] = id
                data_dic['real_qty'] = real_qty
                data_li.push(data_dic)
            }
            if (!real_qty) {
                alert("请输入实际采购数量！")
                return false
            }

            var params = window.location.search;
            id = params.replace("?id=", "")
            console.log("id=" + id + "&line_ids=" + JSON.stringify(data_li))
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/personal-center/stock_manage_view", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("id=" + id + "&line_ids=" + JSON.stringify(data_li))
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate)
                        if (JsonDate['code'] === 200) {
                            alert("操作成功！")
                            document.getElementById("loading").style.display = "none";
                            window.location.href = "/personal-center/product_stock_manage_list_view";
                        }
                        if (JsonDate['code'] === 500) {
                            alert(JsonDate['message'])
                        }

                    }
                }
            }
        }
    </script>
{% endblock %}